<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
      </image>
      <text class="title"></text>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> 
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view>
      </view>
      <view class="action-btn">
        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">账号登录</button>
      </view>
      
      <!-- 微信登录按钮 -->
      <view class="wechat-login-container">
        <button 
          @click="handleWechatLogin" 
          class="wechat-login-btn cu-btn block bg-green lg round"
         
        >
          <i class="iconfont icon-weixin"></i>
          <text>微信快捷登录</text>
        </button>
      </view>
       <!-- v-if="showWechatLogin" -->
	   <!-- v-if="register" -->
      <view class="reg text-center" >
        <text class="text-grey1">没有账号？</text>
        <text @click="handleUserRegister" class="text-blue">立即注册</text>
      </view>
      <view class="xieyi text-center">
        <text class="text-grey1">登录即代表同意</text>
        <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
        <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
      </view>
    </view>
     
  </view>
</template>

<script>
  import { getCodeImg } from '@/api/login'
  import { getToken } from '@/utils/auth'

  export default {
    data() {
      return {
        codeUrl: "",
        captchaEnabled: true,
        // 用户注册开关
        register: false,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "admin",
          password: "admin123",
          code: "",
          uuid: ""
        },
        // 微信登录相关
        showWechatLogin: false, // 是否显示微信登录按钮
        wechatLoginLoading: false // 微信登录加载状态
      }
    },
    created() {
      this.getCode()
      this.checkWechatEnv()
    },
    onLoad() {
      //#ifdef H5
      if (getToken()) {
        this.$tab.reLaunch('/pages/index')
      }
      //#endif
    },
    methods: {
      // 检查是否在微信环境，决定是否显示微信登录按钮
      checkWechatEnv() {
        //#ifdef MP-WEIXIN
        // 微信小程序环境显示微信登录
        this.showWechatLogin = true
        //#endif
        
        //#ifdef H5
        // H5环境下检测是否在微信浏览器
        const ua = window.navigator.userAgent.toLowerCase()
        this.showWechatLogin = ua.includes('micromessenger')
        //#endif
        
        // 其他环境可以根据需要设置
      },
      
      // 微信登录处理
     // 替换原handleWechatLogin方法
     async handleWechatLogin() {
       if (this.wechatLoginLoading) return;
       this.wechatLoginLoading = true;
       
       try {
         // 1. 先显示加载提示（但不要阻塞用户交互）
         this.$modal.loading("准备微信登录...");
     
         //#ifdef MP-WEIXIN
         // 2. 第一步：获取登录凭证code（静默操作，无弹窗）
         const [loginErr, loginRes] = await uni.login();
         if (loginErr || !loginRes.code) {
           throw new Error('获取登录凭证失败，请重试');
         }
         const code = loginRes.code;
     
         // 3. 第二步：调用getUserProfile（必须在点击事件的同步流程中，不能被异步包裹）
         // 注意：这里不能用await包裹后再处理，必须直接在then中处理（确保同步触发）
         uni.getUserProfile({
           desc: '用于快速登录并同步您的微信昵称和头像', // 授权说明（必填）
           success: async (profileRes) => {
             // 用户点击"允许"授权
             try {
               // 4. 调用后端微信登录接口（携带code和用户信息）
               await this.$store.dispatch('WechatLogin', {
                 code: code,
                 encryptedData: profileRes.encryptedData,
                 iv: profileRes.iv
               });
               
               // 5. 登录成功后续操作
               await this.$store.dispatch('GetInfo');
               this.$modal.closeLoading();
               this.$tab.reLaunch('/pages/index');
             } catch (err) {
               this.$modal.closeLoading();
               this.$modal.msgError('登录失败：' + (err.message || '服务器异常'));
             }
           },
           fail: (profileErr) => {
             // 用户点击"拒绝"授权，或因非主动触发导致失败
             this.$modal.closeLoading();
             
             // 精准判断错误类型
             if (profileErr.errMsg.includes('auth deny')) {
               // 用户明确拒绝过授权，引导去设置页开启
               uni.showModal({
                 title: '授权提示',
                 content: '您已拒绝微信授权，无法登录。请在设置中允许授权后重试。',
                 confirmText: '去设置',
                 cancelText: '取消',
                 success: (res) => {
                   if (res.confirm) {
                     // 跳转到微信小程序授权设置页
                     uni.openSetting({
                       success: (settingRes) => {
                         // 用户在设置页操作后，可再次尝试登录
                         console.log('设置页操作结果：', settingRes.authSetting);
                       }
                     });
                   }
                 }
               });
             } else if (profileErr.errMsg.includes('fail:user cancel')) {
               this.$modal.msgError('您取消了授权，登录失败');
             } else {
               // 其他错误（如非主动触发）
               this.$modal.msgError('授权失败，请点击微信登录按钮重试');
             }
           }
         });
         //#endif
     
         //#ifdef H5
         // H5逻辑保持不变（参考之前的优化）
         //#endif
     
       } catch (error) {
         this.$modal.closeLoading();
         this.$modal.msgError(error.message || '微信登录失败，请重试');
       } finally {
         this.wechatLoginLoading = false;
       }
     },
      
      // 用户注册
      handleUserRegister() {
        this.$tab.redirectTo(`/pages/register`)
      },
      
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },
      
      // 账号登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入密码")
        } else if (this.loginForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/index')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .login-btn {
        margin-top: 40px;
        height: 45px;
      }
      
      // 微信登录按钮样式
      .wechat-login-container {
        margin-top: 15px;
        
        .wechat-login-btn {
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          i {
            margin-right: 8px;
          }
        }
      }
      
      .reg {
        margin-top: 15px;
      }
      
      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }
</style>
    